<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta name="author" content="Auelnce,aulence@foxmail.com">
	<title>axios.js向后台传参</title>
	<link rel="shortcut icon" href="../img/favicon.ico">
    <link rel="bookmark" href="../img/favicon.ico">
    <link rel="stylesheet" href="../plugin/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
    <nav>
        <ul class="breadcrumb">
            <li><a href="../index.html">首页</a></li>
            <li class="active">axios.js向后台传参</li>
        </ul>
    </nav>

    <main>
        <h1>axios.js向后台传参</h1>

        <section>
            <h2>使用GET方式发送不同的参数获得不同数据</h2>
            <form class="mt-10">
                <select id="petSelect">
                    <option value="pikachu">皮卡丘</option>
                    <option value="penhuolong">喷火龙</option>
                    <option value="miaowahua">妙蛙花</option>
                </select>
                <button type="button" id="loadData-1">加载数据</button>
            </form>
            
            <div id="petInfo" class="mt-20">
                <div>
                    <label>名称：</label>
                    <span>----</span>
                </div>
                <div>
                    <label>系列：</label>
                    <span>----</span>
                </div>
                <div>
                    <label>技能：</label>
                    <span>----</span>
                </div>
            </div>
        </section>

        <section>
            <h2>使用POST方式向后台发送数据</h2>
            <form name="userInfoForm" class="mt-10">
                <div class="form-line">
                    <label>姓名：</label>
                    <input name="name" type="text" placeholder="请输入您的姓名">
                </div>
                <div class="form-line">
                    <label>手机：</label>
                    <input name="tel" type="tel" placeholder="请输入您的手机号">
                </div>
                <div class="form-line">
                    <label>密码：</label>
                    <input name="pwd" type="password" placeholder="请输入您的密码">
                </div>
                <div class="form-line">
                    <button type="button" id="loadData-2">提交数据</button>
                </div>
            </form>
        </section>

        <section>
            <h2>使用自定义配置的GET方式请求数据</h2>
            <div class="mt-10">
                <form name="dateForm">
                    <div class="form-line">
                        <label>选择日期：</label>
                        <input name="inputDate" type="date" placeholder="请选择任意一天">
                    </div>
                    <div class="form-line">
                        <button id="btnCalendar" type="button">获取黄历</button>
                    </div>
                    <div id="dateRes">
                        <div>
                            <label>所选日期：</label>
                            <span>----</span>
                        </div>
                        <div>
                            <label>节日：</label>
                            <span>----</span>
                        </div>
                        <div>
                            <label>周：</label>
                            <span>----</span>
                        </div>
                        <div>
                            <label>放假安排：</label>
                            <span>----</span>
                        </div>
                        <div>
                            <label>生肖：</label>
                            <span>----</span>
                        </div>
                        <div>
                            <label>农历年：</label>
                            <span>----</span>
                        </div>
                        <div>
                            <label>农历月：</label>
                            <span>----</span>
                        </div>
                        <div>
                            <label>宜：</label>
                            <span>----</span>
                        </div>
                        <div>
                            <label>忌：</label>
                            <span>----</span>
                        </div>
                    </div>
                </form>
            </div>
        </section>

        <section>
            <h2>使用自定义配置的POST方式请求数据</h2>
            <div class="mt-10">
                <form name="mesgForm">
                    <div class="form-line">
                        <label>昵称：</label>
                        <input name="nickname" type="text" placeholder="请输入您的昵称">
                    </div>
                    <div class="form-line align-top">
                        <label>内容：</label>
                        <textarea name="pubContent" placeholder="请输入留言的内容" maxlength="300"></textarea>
                    </div>
                    <div class="form-line">
                        <button id="btnPubMesg" type="button">发布内容</button>
                    </div>
                </form>
            </div>
            <div class="mt-10">添加后的内容到“<a href="http://aulence.com/project/mesg-board/" target="_blank" rel="noopener noreferrer">班级留言板</a>”查看（请注意文明发言，不要在语言上欺负其他同学，否则将受到良心的谴责）</div>
        </section>

        <section>
            更多关于axios.js的更多用法和配置详见“<a href="http://www.axios-js.com/zh-cn/docs/" target="_blank" rel="noopener noreferrer">axios中文文档</a>”的说明。
        </section>
        
    </main>

	<script src="../plugin/axios.min.js"></script>
	<script src="../js/axios-param.js"></script>
</body>
</html>